<template>
	<!-- 投注结果 -->
	<view>
		<view class="header">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c">
					<text>投注</text>
					<!-- <text class="time">{{match_detail.match_start_time}}</text> -->
					
				</view>
				<view></view>
			</view>
		</view>
		<view class="flex-c result">
			<view class="success flex-col-ac">
				<image src="../../static/bets/bet-success.png"></image>
				<text>投注成功</text>
			</view>

			<view class="continue flex-c" @click="fnBetsContinue()">
				<text>继续投注</text>
			</view>
			<view class="seeOrder flex-c" @click="fnSeeOrderDetail()">
				<text>查看订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				type_id:''
			};
		},
		onLoad(option) { //页面传参
			// this.fnGetData(option.data)
			console.log(option)
			this.order_id = option.order_id
			this.type_id = option.type_id
		},
		methods:{
			fnGoBack(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			fnBetsContinue(){
				uni.redirectTo({
					url:`/pages/caipiaoDetail/caipiaoDetail?type_id=${this.type_id}`
				})
			},
			fnSeeOrderDetail(){
				console.log(this.order_id)
				uni.navigateTo({
					url:`/pages/packageA/buyRecord/orderDetail?order_id=${this.order_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		background:#F22F29;
		.status-bar {
			height: var(--status-bar-height);
		}
	
		.title {
			font-size: 26rpx;
			color: #fff;
			height: 100rpx;
			font-size: 32rpx;
			view {
				flex: 1;
				padding: 0 20rpx;
			}
		}
	}
	.result {
		flex-direction: column;
		padding: 20rpx;
		font-size: 30rpx;

		.success {
			image {
				width: 150rpx;
				height: 150rpx;
				margin: 20rpx 0;
			}
			padding: 200rpx 0;
		}
		.continue,.seeOrder{
			height: 88rpx;
			width: 100%;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
		}
		.continue{
			background: #F22F29;
			color: #fff;
		}
		.seeOrder{
			color: #F22F29;
			border: 2rpx solid #F22F29;
			box-sizing: border-box;
		}

	}
</style>
